<template>
  <div class="pcocess-config__wrapper">
    <div class = 'pcocess-config__center'>
      <div class="process-config-wrap" v-show = '!processViewShow'>
        <search ref="search" :inputTitle="$t('channelsettings.process1')" :currentPage="currentPage" :count="count" :disabledReload="disabledReload" @exportMethod="exportAct" @inputChange="inputChangeAct" @turnPage="turnPageAct" :pageSize = '5' :showTools="false"></search>
        <diyTable :tableHeader="tableHeader" :tableData="tableList" @exportAct="tableOpera"></diyTable>
      </div>
      <process-view class = 'process-view' :visible.sync = 'processViewShow' :processData = 'processData' @backCurrentNode = 'backCurrentNode' @processUpdateSuccess = 'processUpdateSuccess' :titleArr = 'processViewTitleArr' :isUpdateProcessView = 'isUpdateProcessView' :isUpdateFirstNode = 'isUpdateFirstNode'></process-view>
    </div>
    <leftSlide :visible.sync='nodeOperation.leftSlideVisible' :width = 'nodeOperation.slideWidth' :title = 'slideLeftTitle'>
       <component :is="nodeOperation.currentSlideView" :form = 'nodeOperation.operationForm' :formContent = 'nodeOperation.operationForm' @saveClick = 'nodeOperationSave' @save = 'nodeOperationSave' @cancelClick = 'nodeOperationCancle'></component>
    </leftSlide>
  </div>
</template>
<script>
  // import {filterAct, handleFakePage} from '@/utils/m7Utils'
  import diyTable from '@/components/ui-modules/diytable/index.vue'
  import leftSlide from '@/components/ui-modules/newConfig/leftSlide.vue'
  import search from '../base/search.vue'
  import processView from './processView.vue'
  // 编辑的组件
  // 语音播放节点
  import ivrNodeAnnouncement from '../nodeManage/ivrNodeEditContent/ivrAnnouncementNodeLinkDeal.vue'
  // 播放文本语音节点
  import ivrNodeTextAnnouncement from '../nodeManage/ivrNodeEditContent/ivrTextAnnouncementNodeLinkDeal.vue'
  // 按键菜单节点
  import ivrNodeIvr from '../nodeManage/ivrNodeEditContent/ivrIvrNodeLinkDeal.vue'
  // md5加密
  import ivrNodeEncryptMd5 from '../nodeManage/ivrNodeEditContent/encryptMd5NodeLinkDeal.vue'
  // 采集输入节点
  import ivrNodeValidation from '../nodeManage/ivrNodeEditContent/ivrValidationNodeLinkDeal.vue'
  // 赋值节点
  import ivrNodeAssignment from '../nodeManage/ivrNodeEditContent/ivrAssignmentNodeLinkDeal.vue'
  // 按变量路由
  import ivrNodeRoute from '../nodeManage/ivrNodeEditContent/ivrRouteNodeLinkDeal'
  // 转IVR菜单节点
  import ivrNodeIvrMenu from '../nodeManage/ivrNodeEditContent/ivrMenuNodeLinkDeal'
  // callurl 节点
  import ivrNodeCallUrl from '../nodeManage/ivrNodeEditContent/ivrCallUrlNodeLinkDeal'
  // 时间节点
  import ivrNodeDate from '../nodeManage/ivrNodeEditContent/ivrDateNodeLinkDeal'
  // 双向回呼节点
  import ivrNodeTwowaycall from '../nodeManage/ivrNodeEditContent/ivrWebcallPeerNodeLinkDeal'
  // 语音识别节点
  import ivrNodeAsr from '../nodeManage/ivrNodeEditContent/ivrAsrPeerNodeLinkDeal'
  // 留言节点
  import ivrNodeVoiceMail from '../nodeManage/ivrNodeEditContent/ivrVoiceMailNodeLinkDeal'
  // 会议室节点
  import ivrNodeRoom from '../nodeManage/ivrNodeEditContent/ivrRoomNodeLinkDeal'
  // 自定义满意度节点
  import ivrNodeSatisfaction from '../nodeManage/ivrNodeEditContent/ivrSatisfactionNodeLinkDeal'
  // 采集工号并拨打节点
  import ivrNodeSuperDialJobNum from '../nodeManage/ivrNodeEditContent/ivrSuperDialJobNumNodeLinkDeal'
  // 自定义节点
  import ivrNodeExtensionPeer from '../nodeManage/ivrNodeEditContent/ivrExtensionPeerNodeLinkDeal'
  // 技能组节点
  import ivrNodeQueue from '../nodeManage/ivrNodeEditContent/ivrNodeQueueDeal.vue'
  // 系统节点
  import ivrNodeSystem from '../nodeManage/ivrNodeEditContent/ivrSystemNodeLinkDeal.vue'
  export default {
    name: 'pcocessConfig',
    data () {
      return {
        name: 'processConfig',
        currentPage: 1,
        count: 0,
        disabledReload: false,
        tableHeader: [
          {prop: 'DisplayName', label: '流程名称'},
          {prop: 'PBX', label: 'PBX'},
          {prop: 'UpdateAgent', label: '最后更新人'},
          {prop: 'UpdateTime', label: '最后更新时间'},
          {prop: 'operaSet', label: '操作', width: 150, opera: [{actMethod: 'viewProcess', actName: '查看流程'}, {actMethod: 'del', actName: '删除'}]}
        ],
        tableList: [],
        processViewShow: false,
        processData: {},
        nodeOperation: {
          leftSlideVisible: false,
          currentSlideView: '',
          operationForm: {},
          slideWidth: '360px'
        },
        slideLeftTitle: '',
        processViewTitleArr: ['流程管理', '添加IVR流程'],
        isUpdateProcessView: 0,
        isUpdateFirstNode: 0,
        isUpdateFirstNodeList: false // 新增节点是否和当前页的节点一样 一样的话更新节点列表
      }
    },
    components: {
      search,
      diyTable,
      leftSlide,
      processView, // 编辑添加组件
      ivrNodeAnnouncement,
      ivrNodeTextAnnouncement,
      ivrNodeIvr,
      ivrNodeEncryptMd5,
      ivrNodeValidation,
      ivrNodeAssignment,
      ivrNodeRoute,
      ivrNodeIvrMenu,
      ivrNodeCallUrl,
      ivrNodeDate,
      ivrNodeTwowaycall,
      ivrNodeAsr,
      ivrNodeVoiceMail,
      ivrNodeRoom,
      ivrNodeSatisfaction,
      ivrNodeSuperDialJobNum,
      ivrNodeExtensionPeer,
      ivrNodeSystem,
      ivrNodeQueue
    },
    watch: {
      PBX () {
        if (this.$route.meta.title === this.name) {
          this.processViewShow = false
          this.$refs.search.exportMethod('refresh')
        }
      }
    },
    computed: {
      Account () {
        return this.$store.state.session.account.account
      },
      PBX () {
        return this.$store.state.config.callCenter.currentPBX
      }
    },
    methods: {
//        添加刷新生效方法接收
      exportAct (val) {
        if (val === 'add') {
          this.add()
        } else if (val === 'refresh') {
          this.refresh()
        } else if (val === 'active') {
          this.active()
        }
      },
      add () {
        this.processData = {DisplayName: '', FirstNode: '2', FirstNodeType: 'system'}
        this.processViewTitleArr = ['流程管理', '添加IVR流程']
        this.processViewShow = true
      },
      refresh () {
        this.currentPage = 1
        this.queryProcessList()
      },
      active () {
        let obj = {}
        obj.PBX = this.PBX
        obj.Account = this.Account
        this.$store.dispatch('reloadIvr', obj).then(res => {
          if (res.success) {
            this.disabledReload = true
            this.$message({
              type: 'success',
              message: this.$t('configLazyLoad.process.effectiveSuccessfully')
            })
          }
        })
      },
      //  搜索列表
      inputChangeAct (val, page) {
        this.currentPage = page || 1
        this.queryProcessList(this.PBX, val)
      },
      turnPageAct (val, searchStr) {
        if (searchStr) {
          this.inputChangeAct(searchStr, val)
        } else {
          this.currentPage = val
          this.queryProcessList()
        }
      },
      tableOpera (obj) {
        if (obj.actMethod === 'viewProcess') {
          this.processViewTitleArr = ['流程管理', '修改IVR流程']
          this.processViewShow = true
          this.processData = obj.data
        } else if (obj.actMethod === 'del') {
          let query = obj.data
          this.delProcess(query)
        }
      },
      cancelClickAct () {
        this.isShowLeft = false
      },
//      添加和修改都走这一个方法
      saveAct (val) {
        let obj = val
        obj.PBX = this.PBX
        obj.Account = this.Account
        this.$store.dispatch('updateAnnouncement', obj).then(res => {
          this.$refs.search.exportMethod('refresh')
          this.isShowLeft = false
          this.disabledReload = false   //  生效按钮可以点击了
        })
      },
//      删除
      delAct (val) {
        this.$confirm('此语音播放节点将被删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteAnnouncement', val).then(res => {
            this.$refs.search.exportMethod('refresh')
            this.disabledReload = false    //  生效按钮可以点击了
            this.$message({
              type: 'success',
              message: this.$t('config.channel.deleteSuccess')
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      queryProcessList (pbx, searchVal) { // 获取列表或者是刷新列表
        let data = {}
        let currentPbx = pbx || this.PBX
        data.Account = this.$store.state.session.account.account
        data.PBX = currentPbx
        if (searchVal) {
          data.DisplayName = searchVal
        }
        data.page = this.currentPage
        data.limit = 5
        this.isShowDetail = false
        this.$store.dispatch('queryIvrProcessList', data).then(resp => {
          if (resp && resp.success) {
            this.tableList = resp.list
            this.count = resp.count
          } else {
            this.$message.error('查询失败！')
          }
        })
      },
      delProcess (val) {
        this.$confirm('此流程将被删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delIvrProcess', val).then(res => {
            this.$refs.search.exportMethod('refresh')
            this.disabledReload = false    //  生效按钮可以点击了
            this.$message({
              type: 'success',
              message: this.$t('config.channel.deleteSuccess')
            })
            this.queryProcessList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      backCurrentNode (data) {
        let operationName = '修改' + data.nodeName
        if (data.operationType === 'add') {
          operationName = '添加' + data.nodeName
          if (data.isUpdateFirstNodeList) {
            this.isUpdateFirstNodeList = true
          } else {
            this.isUpdateFirstNodeList = false
          }
        }
        this.slideLeftTitle = operationName
        this.nodeOperation.operationForm = data.data
        this.nodeOperation.currentSlideView = data.component
        this.nodeOperation.slideWidth = data.width || '360px'
        this.nodeOperation.leftSlideVisible = true
      },
      processUpdateSuccess () {
        this.refresh()
        this.processViewShow = false
      },
      nodeOperationSave (data) {
        this.isUpdateProcessView = (new Date()).getTime()
        if (this.isUpdateFirstNodeList) {
          this.isUpdateFirstNode = (new Date()).getTime()
        }
        this.initNodeOperation()
      },
      nodeOperationCancle () {
        this.initNodeOperation()
      },
      initNodeOperation () {
        this.nodeOperation = {
          leftSlideVisible: false,
          currentSlideView: '',
          operationForm: {}
        }
      }
    },
    deactivated () {
      this.oldPBX = this.PBX
    },
    activated () {
      this.processViewShow = false
      if (this.oldPBX !== this.PBX) {
        this.$refs.search.exportMethod('refresh')
      }
    },
    beforeMount () {
      this.queryProcessList()
    }
  }
</script>

<style lang="stylus" scoped>
  .pcocess-config__wrapper
    .pcocess-config__center
      width 100%
      height 100%
      padding 20px
      position relative
      box-sizing border-box
    height calc(100% - 48px)
    overflow-y auto
    .node-manage
      border 1px solid #e7e7eb
      border-bottom 0
    .process-view
      position absolute
      box-sizing border-box
      border-top 1px solid #ccc
      width 100%
      height 100%
      left 0
      top 0
      background white
</style>
